@import "./tag";
@import "./iconfont";

// 左浮动
.fl {
  float: left;
}

// 右浮动
.fr {
  float: right;
}

// 清除浮动
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

// 文本对齐
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.vertical-middle{
  vertical-align: middle;
}

// 状态显示
.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

.hide {
  display: none;
}

.o-hide {
  overflow: hidden;
}

// 字体大小
.f-s-small{
  font-size: $font-size-small;
}

.f-s-base{
  font-size: $font-size-base;
}

.f-s-large{
  font-size: $font-size-large;
}

.c-pointer{
  cursor: pointer;
}

.word-break{
  word-break: break-word;
}

.color-red,
.c-red{
  color: $color-red;
}

.c-blue{
  color: $color-highlight-text;
}

.case-show{
  display: block;
  width: 150px;
  margin: 20px auto;
  padding: 10px 18px;
  background-color: $color-highlight-text;
  border-radius: $border-radius;
  text-align: center;
  color: $color-white !important;
}

code:not([class*="lang"]),
.code{
  padding: 2px 5px;
  background: #f7f7f9;
  border: 1px solid #E3EDF3;
  border-radius: 3px;
  white-space: pre-wrap;
  color: #d14;
}

.wrap{
  width: 1200px;
  margin: 0 auto;
}

.btn{
  padding: 10px 15px;
  border: 1px solid $color-highlight-text;
  border-radius: $border-radius;
  color: $color-highlight-text;
  cursor: pointer;

  &.active{
    background: $color-highlight-text;
    color: $color-white;
  }

  .iconfont{
    vertical-align: middle;
  }
}

// 文字选中颜色
::selection{
  background: $color-highlight-text;
  color: $color-white;
}

// 滚动条颜色
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: #e4e4e4;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: $color-highlight-text;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

body {
  overflow-x: hidden;
  width: 100%;
  background: $color-main-background;
  font: $font-size-base "Andale Mono",PingFangSC-Regular,Microsoft Yahei;
  color: $color-main-text;
}

// 翻页
.el-pagination{
  margin: 30px 0;
  text-align: center;

  li{
    border: 0;

    &:last-child{
      border: 0;
    }

    &.active{
      background: none;
      color: $color-highlight-text;
    }
  }

  .btn-next,
  .btn-prev{
    border: 0;
  }
}

.desktop-show{
  display: block;
}

.tablet-show,
.phone-show{
  display: none;
}

// 禁止点击
.prohibit-event{
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .desktop-show{
    display: none;
  }

  .tablet-show{
    display: block;
  }

  .wrap{
    width: 94%;
  }

  // 文章列表
  .article-list-wrap,
  .container{
    .thumbnail-wrap{
      width: 260px;
      margin-right: 15px;
    }
  }
}

@media screen and (max-width:768px) {
  .phone-show{
    display: block;
  }

  .phone-hide{
    display: none;
  }

  .wrap{
    width: 90%;
  }
}
